<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/red.css">
</head>

<body>
    <div class="eml">
        <h1>邮箱注册/验证</h1>
        <div class="inp1">
            邮箱：<input type="text" placeholder=" 请输入邮箱" id="eamil"><br>
        </div>
        <div class="inp2">
            密码：<input type="password" placeholder=" 请输入密码(6-15位)" id="password"><br>
        </div>
        <div class="inp4">
            验证码：<input type="text" placeholder=" 不区分大小写" id="ver1">
            <span id="ver2">1234</span>
        </div>
        <input type="submit" id="register" value="立即注册">
    </div>
    <div class="login">
        已有账号?<a href="./login.html">登录</a>
    </div>
    <div class="bottom">
        <p><a href="./article.html">《东大门美购服务条款、隐私政策》</a> | <a href="#">常见问题？</a><br>
            Copyright © 2016-2025 东大门美购网-批发代购 版权所有 保留一切权利 备案号:辽ICP备15011384号-1</p>
    </div>
</body>
<script src="./libs/jquery.js"></script>
<script>
   var reg = document.getElementById("register");
    var eamil = document.getElementById("eamil")

    var eam =  /^[\w-]{1,12}@[\w-]{2,14}\.[a-z]{2,6}$/;

    reg.onclick = function(){
        if(!eam.test(eamil.value)){
            alert("邮箱格式出错");
        }
    }





    // 生成验证码
    // 四位数字的随机验证码
    // 范围随机数
    function random(max, min) {
        return Math.round(Math.random() * (max - min) + min);
    }

    // 随机4位数字的验证码
    function randomNumber() {
        var str = "";
        for (var i = 0; i < 4; i++) {
            str += random(0, 9);
        }
        return str;
    }

    const cc = randomNumber();

    $("#ver2").html(cc);

    $("#register").click(function () {
        if ($("#ver1").val() !== cc) {
            alert("验证码不对");
            return false;
        }
    })
    // 点击注册按钮，开始注册功能
    $("#register").click(function () {
        // console.log($("#phone").val());
        // console.log($("#setpassword").val());
        // 发起ajax请求，将表单中的用户信息提交给后端
        $.ajax({
            url: "http://localhost:3000/api",
            data: {
                type: "register",
                username: $("#eamil").val(),
                password: $("#password").val()
            },
            success: res => {
                // 请求成功后，解析数据，根据后端提示，添加不同的交互功能
                res = JSON.parse(res);
                if (res.code === 3) {
                    // 成功后的交互
                    if (confirm("注册成功，是否跳转到登录")) {
                        // 所谓的跳转到登录页面
                        location.assign("http://localhost:3000/login.html");
                    }
                } else {
                    // 失败后的交互
                    alert("注册失败，" + res.title);
                    console.log(JSON.parse);
                    $("#eamil").val("");
                    $("#eamil")[0].focus();
                }
            }
        })
        return false;
    })
</script>

</html>